<template>
  <div class="my-cover">
    <!-- 图片按钮 -->
    <div class="btn_img" @click="openDialog()">
      <img :src="coverImageUrl" />
    </div>
    <!-- 对话框 -->
    <el-dialog
      :append-to-body="true"
      :visible.sync="dialogVisible"
      width="720px">
      <!-- tab组件 -->
      <el-tabs v-model="activeName" type="card">
         <el-tab-pane label="素材库" name="image">
            <div style="padding-bottom: 20px;">
                <el-radio-group v-model="isCollected" size="mini">
                    <el-radio-button label="false" @click="hCollect">全部</el-radio-button>
                    <el-radio-button label="true" @click="hCollect">收藏</el-radio-button>
                </el-radio-group>
            </div>
            <!-- 素材列表 -->
            <el-row :gutter="10" class="img_list">
                <el-col class="img_item" :xs="12" :sm="6" :md="6" :lg="4" v-for="img in images" :key="img.id">
                    <el-image
                    :class="{selected:img.url===selectedImageUrl}"
                    @click.native="hImageClick(img)"
                    style="height: 100px;"
                    :src="img.url"
                    fit="cover">
                    
                    </el-image>
                </el-col>
            </el-row>
            <!-- /素材列表 -->
            <!-- 分页组件 -->
            <el-pagination
            @current-change="hPageChange"
                          background
                          layout="prev, pager, next"
                          :total="1000">
            </el-pagination>
        </el-tab-pane>
       <el-tab-pane label="上传图片" name="upload">

          <!--
            本质还是ajax技术在做上传。

            action：上传地址
            show-file-list:false，不需要显示已上传的文件列表
            on-success： 上传成功之后的回调函数
            before-upload: 上传之前对文件进行检测
            name: 设置上传的文件参数名，要与后端接口中的要求一致。
          -->
          <el-upload
            class="avatar-uploader"
            action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
            :headers="h"
            :on-success="hUploadSuccess"
            name="image"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload">
            <!--
              如果当前有预览地址就说明图片上传成功了。
              给用户展示这张图，用户成功地看到这张图时，关闭整个上传对话框。
              图片的onload事件：
              - 当你设置图片的src时，浏览器会去请求图片的资源，当图片请求回来之后
              会一有一个事件触发出来，这个事件就是onload。
            -->
            <el-image v-if="imgSrc" :src="imgSrc" class="avatar"></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-tab-pane>
        
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="hConfirmImage">确 定</el-button>
      </span>
    </el-dialog>
   
  </div>
</template>

<script>
// 导入图片资源 ----- webpack就会去处理它
import defaultImg from '@/assets/default.png'
import axios from 'axios'
export default {
  name: 'MyCover',
  props:['value'],
  data () {
    return {
      coverImageUrl:this.value || defaultImg, // 图片按钮上的图片地址
      imgSrc: null,
      h:{
                      Authorization:`Bearer `+localStorage.getItem('tokenInfo')
                  },
      selectedImageUrl: null, // 记录当前用户选中的是哪一张图片
      isCollected:null,
      images:[],
// 图片列表数据项      // 控制对话框显示隐藏
      dialogVisible: false,
      // 当前tabs组件激活的选项卡的name属性的值
      activeName: 'image',
      curPage:1,// 当前页码
      totalCount:0 // 一共有几条
    }
  },
  created(){
    this.loadImages()
  },
  methods: {
    hConfirmImage (){
      if(this.activeName === 'image'){
        // 是素材库
        if(this.selectedImageUrl){
          // 有选中
          // 1.把当前选中的图片展示在图片按钮扭伤
          this.coverImageUrl = this.selectedImageUrl
          // 2.抛出事件
          this.$emit('input',this.coverImageUrl)
          // 3.关闭弹层
          this.dialogVisible = false
        } else {
          this.$message.warning('请先选中图片')
        }
      }else {
        // 在做上传
        if(this.imgSrc){
          // 有选中
          // 1.把当前选中的图片展示在图片按钮扭伤
          this.coverImageUrl = this.imgSrc
          this.dialogVisible = false
        } else {
          this.$message.warning('请先上传图片')
        }
      }
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    hUploadSuccess (res) {
      console.log(res)
      // 保存上传成功之后的图片地址
      this.imgSrc = res.data.url
      this.$message.success('上传素材成功')
      this.loadImages()
    },
    hImageClick (img) {
      // console.log(img);
      this.selectedImageUrl=img.url
    },
    hCollect () {
      this.curPage=1
      this.loadImages()
    },
    hPageChange (curPage){
      this.cur_page = curPage
      // 2. 再发请求
      this.loadImages()
    },
    async loadImages(){
      const token = localStorage.getItem('tokenInfo')
      const result = await axios({
        method:'get',
        url:'http://ttapi.research.itcast.cn/mp/v1_0/user/images',
        headers:{
                Authorization:`Bearer ${token}`
              },
        params:{
          collect:false,
          per_page:10,
          page:this.curPage
        }
      })
      
      this.images=result.data.data.results
      this.totalCount = result.data.data.total_count
    },
    openDialog () {
      this.activeName = 'image'
      this.imgSrc = null
      this.selectedImageUrl = ''
      this.dialogVisible = true

    }
  }
}
</script>

<style scoped lang='less'>
// 图片按钮
.btn_img {
  width: 150px;
  height: 150px;
  border: 1px dashed #ddd;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.selected::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3) url(../assets/selected.png) no-repeat center / 50px 50px;
  }
// 素材列表

  .img_item{
  position: relative;
   
  }
  .avatar-uploader {
    text-align: center;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar-uploader /deep/ .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
</style>
